<%--
  Created by IntelliJ IDEA.
  User: TYZ
  Date: 2020/3/12
  Time: 19:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<% String path = request.getContextPath();%>
<html>
<head>
    <title>Title</title>
</head>
<body>
<div class="container-fluid">
    <div class="panel panel-primary" style="width:250px">
        <div class="panel-heading">
            <center><h1>修改</h1></center>
        </div>
        <div class="panel-body">
            <form id="registerForm">
                <div class="form-group">
                    <label for="name">请输入账号:</label>
                    <input type="text" class="form-control" name="username" id="name" value="${user.username }" placeholder="请输入账号">
                    <div id="tips"></div>
                </div>
                <div class="form-group">
                    <label for="upassword">请输入密码:</label>
                    <input type="password" class="form-control" name="upassword" id="upassword" value="${user.upassword }" placeholder="请输入密码">
                    <div id="tips"></div>
                </div>
                <div class="form-group">
                    <label for="lastname" class="col-sm-2 control-label">头像</label>
                    <div class="col-sm-10">
                        <input type="file" name="myFile" id="uploadImg"><!-- 上传元素 -->
                        <img id="add_img" width="100px" height="100px" src="<%=path %>/file/download?filename=${user.uimg }"><!-- 图片上传后回显 -->
                        <input type="hidden" name="uimg" id="uimg" value="${user.uimg }"><br><br><!-- 注册提交文件地址到数据库 -->
                    </div>
                </div>
                <div class="form-group">
                    <label for="ubirthday">请输入生日:</label>
                    <input type="date" class="form-control" name="ubirthday" id="ubirthday" value="${user.ubirthday }" placeholder="请输入生日">
                    <div id="tips"></div>
                </div>
                <div class="form-group">
                    <label for="usex">请输入性别:</label>
                    <input type="radio" name="usex" value="1" <c:if test="${user.usex == 1 }">checked</c:if>>男
                    <input type="radio" name="usex" value="2" <c:if test="${user.usex == 2 }">checked</c:if>>女
                    <div id="tips"></div>
                </div>
                <div class="form-group">
                    <label for="roleIds">角色:</label>
                    <c:forEach items="${roles }" var="role">
                        <input type="checkbox"
                               <c:if test="${roleIds.contains(role.roleId) }">checked</c:if>
                               value="${role.roleId }" name="roleIds" id="roleIds"> ${role.roleName }
                    </c:forEach>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    $(function(){
        //AJAX 异步 上传文件 不保存数据
        $("#uploadImg").uploadify({
            //插件自带  不可忽略的参数flash插件
            'swf': '<%=path%>/js/uploadify/uploadify.swf',
            //前台请求后台的url 不可忽略的参数
            'uploader': '<%=path%>/file/upLoadFile1',
            //给div的进度条加背景 不可忽略
            'queueID': 'fileQueue',
            //上传文件文件名 跟file标签 name值 保持一致
            'fileObjName' : 'myFile',
            //给上传按钮设置文字
            'buttonText': '上传头像',
            //设置文件是否自动上传
            'auto': true,
            //可以同时选择多个文件 默认为true  不可忽略
            'multi': true,
            //上传文件的类型  默认为所有文件    'All Files'  ;  '*.*'
            //'All Files'  ;  '*.*',
            //在浏览窗口底部的文件类型下拉菜单中显示的文本
            'fileTypeDesc': 'Image Files',
            //上传后队列是否消失
            'removeCompleted': true,
            //队列消失时间
            'removeTimeout' : 1,
            //上传文件的个数，项目中一共可以上传文件的个数,-1 ： 可以上传多个不限制
            'uploadLimit':  -1,
            //允许上传的文件后缀//  '*.xls;*.xlsx'
            'fileTypeExts': '*.jpg;*.gif;*.jpeg;*.png',
            //成功回调函数 file：文件对象。data后台输出数据
            'onUploadSuccess':function(file,data,response){
                //alert(file.name+" 路径："+data)
                //图片回显， 预览
                $("#add_img").attr("src","<%=path%>/file/download?filename="+data);
                $("#uimg").val(data);
            }
        })
    })
</script>
</html>
